{extend name="layout/iframe_layout" /}

{block name="title"}后台管理系统{/block}

{block name="style"}
<link rel="stylesheet" href="/static/admin/css/default.css?v=1.15" />
<style>

</style>
{/block}

{block name="content"}
<div id="app">
    <!-- 顶部栏 -->
    <div class="header">
        <span @click="reload()">后台管理系统</span>
        <div>
            <el-button
                    title="退出"
                type="text"
                icon="el-icon-switch-button"
                size="small"
                style="color:#ffffff;"
                @click="logout()"
        >
            </el-button>
        <el-button
                title="折叠或展开菜单"
                type="text"
                icon="el-icon-s-fold"
                size="mini"
                style="color: #fff;"
                @click="toggleSidebar"
        ></el-button>
        </div>

    </div>

    <div class="main-layout">
        <!-- 侧边栏 -->
        <div :class="['sidebar', { 'collapsed': isCollapsed, 'hidden': isHidden }]">
            <el-menu
                    :default-active="activeIndex"
                    class="el-menu-vertical-demo"
                    background-color="#2d3a4b"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    :collapse="isCollapsed"
                    @select="switchPage"
            >
                <!-- 动态渲染菜单 -->
                <template v-for="(item, index) in menuData" :key="index">
                    <el-submenu v-if="item.children && item.children.length > 0" :index="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </template>
                        <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex" :index="child.index">
                           <i :class="child.icon"></i> {{ child.title }}
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :index="item.index">
                        <i :class="item.icon"></i>
                        <span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </div>

        <!-- iframe 主体 -->
        <div class="iframe-container">
            <iframe :src="iframeSrc" class="iframe-content" frameborder="0"></iframe>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                iframeSrc: '/admin',
                activeIndex: 'feature',
                isCollapsed: false, // PC折叠
                isHidden: false,    // 移动端隐藏
                menuData: [] // 动态获取的菜单数据
            };
        },
        methods: {
            reload(){
                parent.location.reload();
            },
            logout() {
                this.$confirm('确定退出账号吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    post('/login/logout')
                        .then(res => {
                            if (res.code == 0) {
                                this.$message.success('退出成功');
                                setTimeout(() => {
                                    location.href = '/admin/login/index';
                                }, 1000)
                                return;
                            }
                            this.$message.error(res.msg);

                        }).catch(error => {
                    });
                }).catch(() => {
                    this.$message.info('已取消');
                });
            },
            // 获取菜单数据
            getMenus() {
                get('/menus/my_list').then(res => {
                    if (res.code === 0) {
                        this.menuData = res.data;
                        if (res.data.length > 0){
                            // 默认选中第一个菜单
                            this.switchPage(res.data[0].index);
                        }
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(error => {
                    console.error('获取菜单数据失败:', error);
                    this.$message.error('无法加载菜单数据，请稍后重试');
                });
            },
            toggleSidebar() {
                if (window.innerWidth <= 768) {
                    this.isHidden = !this.isHidden;
                } else {
                    this.isCollapsed = !this.isCollapsed;
                }
            },
            switchPage(path) {
                this.iframeSrc = '/admin/' + path;
                this.activeIndex = path;
                this.isHidden = false; // 点击后自动关闭移动菜单
            },
            handleResize() {
                const isMobile = window.innerWidth <= 768;

                if (!isMobile) {
                    // PC端：确保侧边栏可见
                    this.isHidden = false;
                } else {
                    // 移动端：折叠无意义，清除折叠状态（可选）
                    this.isCollapsed = false;
                }
            }
        },
        beforeDestroy() {
            window.removeEventListener('resize', this.handleResize);
        },
        mounted() {
            this.getMenus(); // 调用动态获取菜单数据的方法
            const saved = localStorage.getItem('admin-menu-active');
            if (saved) {
                this.activeIndex = saved;
                this.iframeSrc = '/admin/' + saved;
            }
            // 初始化判断是否是移动端
            this.handleResize();
            // 监听窗口大小变化
            window.addEventListener('resize', this.handleResize);
        },
        watch: {
            activeIndex(val) {
                localStorage.setItem('admin-menu-active', val);
            }
        }
    });
</script>
{/block}
